<template>
  <div class="info-management">
    <!-- Header -->
    <div class="header">
      <div class="header-content">
        <h1 class="title">{{ currentView === 'list' ? '信息管理' : '推文创作' }}</h1>
        <el-button
            v-if="currentView === 'list'"
            type="primary"
            :icon="Plus"
            @click="handleCreate"
        >
          推文创作
        </el-button>
        <el-button
            v-else
            @click="backToList"
        >
          返回列表
        </el-button>
      </div>
    </div>

    <div class="main-content">
      <!-- List View -->
      <div v-if="currentView === 'list'">
        <!-- Search and Filter Section -->
        <el-card class="search-card">
          <el-form :model="searchForm" :inline="true" class="search-form">
            <el-form-item label="文章标题：">
              <el-input
                  v-model="searchForm.title"
                  placeholder="请输入文章标题"
                  style="width: 200px"
                  clearable
              />
            </el-form-item>

            <el-form-item label="文章分类：">
              <el-select v-model="searchForm.category" style="width: 120px">
                <el-option label="全部" value="全部" />
                <el-option label="启用" value="启用" />
                <el-option label="停用" value="停用" />
              </el-select>
            </el-form-item>

            <el-form-item label="更新时间：">
              <el-date-picker
                  v-model="searchForm.dateRange"
                  type="daterange"
                  range-separator="—"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  style="width: 240px"
              />
            </el-form-item>

            <el-form-item>
              <el-button @click="handleReset">重置</el-button>
              <el-button type="primary" @click="handleSearch">查询</el-button>
            </el-form-item>
          </el-form>
        </el-card>

        <!-- Table Section -->
        <el-card class="table-card">
          <template #header>
            <div class="card-header">
              <span class="card-title">推文列表</span>
            </div>
          </template>

          <el-table
              :data="tableData"
              style="width: 100%"
              @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="id" label="编号" width="280">
              <template #default="scope">
                <span class="id-text">{{ scope.row.id }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="title" label="文章标题" min-width="200" />
            <el-table-column prop="category" label="文章分类" width="120">
              <template #default="scope">
                <el-tag type="success" size="small">{{ scope.row.category }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="tag" label="标签" width="100">
              <template #default="scope">
                <el-tag type="primary" size="small">{{ scope.row.tag }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="lastModified" label="最后修改时间" width="180" />
            <el-table-column label="操作" width="180">
              <template #default="scope">
                <el-button link type="primary" size="small" @click="handleOnline(scope.row)">上线</el-button>
                <el-button link type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
                <el-button link type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- Pagination -->
          <div class="pagination-wrapper">
            <el-pagination
                v-model:current-page="pagination.currentPage"
                v-model:page-size="pagination.pageSize"
                :page-sizes="[10, 20, 50, 100]"
                :total="pagination.total"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
          </div>
        </el-card>
      </div>

      <!-- Create/Edit View -->
      <div v-else-if="currentView === 'create'">
        <el-card class="create-card">
          <el-form :model="createForm" label-width="120px" class="create-form">
            <el-form-item label="文章标题：" required>
              <el-input v-model="createForm.title" placeholder="请输入文章标题" />
            </el-form-item>

            <el-form-item label="文章分类：" required>
              <el-select v-model="createForm.category" placeholder="请选择文章分类" style="width: 100%">
                <el-option label="娱乐" value="娱乐" />
                <el-option label="科技" value="科技" />
                <el-option label="生活" value="生活" />
                <el-option label="教育" value="教育" />
              </el-select>
            </el-form-item>

            <el-form-item label="文章标签：" required>
              <el-select v-model="createForm.tags" placeholder="请选择文章标签" style="width: 100%">
                <el-option label="趣闻" value="趣闻" />
                <el-option label="热点" value="热点" />
                <el-option label="推荐" value="推荐" />
                <el-option label="原创" value="原创" />
              </el-select>
            </el-form-item>

            <el-form-item label="文章摘要：" required>
              <el-input
                  v-model="createForm.summary"
                  type="textarea"
                  placeholder="请输入文章摘要"
                  :rows="4"
                  resize="vertical"
                  maxlength="500"
                  show-word-limit
              />
            </el-form-item>

            <el-form-item label="文章封面：" required>
              <div class="upload-container">
                <el-upload
                    v-model:file-list="coverFileList"
                    :auto-upload="false"
                    :before-upload="beforeUpload"
                    :on-change="handleCoverChange"
                    :on-remove="handleCoverRemove"
                    :on-preview="handleCoverPreview"
                    list-type="picture-card"
                    :limit="1"
                    accept="image/*"
                >
                  <div class="upload-content">
                    <el-icon class="upload-icon"><Plus /></el-icon>
                    <div class="upload-text">上传图片</div>
                  </div>
                </el-upload>
              </div>
            </el-form-item>

            <el-form-item label="主图图片：" required>
              <div class="upload-container">
                <el-upload
                    v-model:file-list="mainImageFileList"
                    :auto-upload="false"
                    :before-upload="beforeUpload"
                    :on-change="handleMainImageChange"
                    :on-remove="handleMainImageRemove"
                    :on-preview="handleMainImagePreview"
                    list-type="picture-card"
                    :limit="1"
                    accept="image/*"
                >
                  <div class="upload-content">
                    <el-icon class="upload-icon"><Plus /></el-icon>
                    <div class="upload-text">上传图片</div>
                  </div>
                </el-upload>
              </div>
            </el-form-item>

            <el-form-item label="文章详情：" required>
              <el-input
                  v-model="createForm.content"
                  type="textarea"
                  placeholder="请输入文章详情"
                  :rows="6"
                  resize="vertical"
                  maxlength="2000"
                  show-word-limit
              />
            </el-form-item>

            <el-form-item label="选择店铺：">
              <el-button @click="openStoreDialog" style="width: 100%; text-align: left; justify-content: flex-start;">
                {{ selectedStore || '请选择' }}
              </el-button>
            </el-form-item>

            <el-form-item label="活动引流标语：">
              <el-input v-model="createForm.activitySlogan" placeholder="请输入活动引流标语" />
            </el-form-item>

            <el-form-item label="选择活动：">
              <el-button @click="openActivityDialog" style="width: 100%; text-align: left; justify-content: flex-start;">
                {{ selectedActivity || '请选择' }}
              </el-button>
            </el-form-item>

            <el-form-item label="文章定位：">
              <el-input v-model="createForm.location" placeholder="39.90923,116.397428" />
            </el-form-item>

            <!-- 高德地图 -->
            <el-form-item label="">
              <div id="amap-container" class="amap-container"></div>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="handleSubmit">提交</el-button>
              <el-button @click="handleSaveDraft">保存草稿</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </div>

    <!-- 图片预览对话框 -->
    <el-dialog
        v-model="previewDialogVisible"
        title="图片预览"
        width="60%"
        :before-close="handlePreviewClose"
    >
      <div class="preview-container">
        <img :src="previewImageUrl" alt="预览图片" class="preview-image" />
      </div>
    </el-dialog>

    <!-- 选择店铺对话框 -->
    <el-dialog
        v-model="storeDialogVisible"
        title="选择店铺"
        width="800px"
        :before-close="handleStoreDialogClose"
    >
      <div class="dialog-content">
        <div class="search-section">
          <el-input
              v-model="storeSearchKeyword"
              placeholder="请输入店铺名称"
              style="width: 200px; margin-right: 10px;"
              clearable
          />
          <el-button type="primary" @click="searchStores">提交</el-button>
        </div>

        <div class="filter-section" style="margin: 15px 0;">
          <el-select v-model="storeAreaFilter" placeholder="区域选择" style="width: 150px;">
            <el-option label="全部区域" value="" />
            <el-option label="朝阳区" value="朝阳区" />
            <el-option label="海淀区" value="海淀区" />
            <el-option label="西城区" value="西城区" />
            <el-option label="东城区" value="东城区" />
          </el-select>
        </div>

        <el-table
            :data="filteredStoreList"
            style="width: 100%"
            @selection-change="handleStoreSelectionChange"
            max-height="300"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="id" label="编号" width="100" />
          <el-table-column prop="name" label="门店名称" />
        </el-table>

        <div v-if="filteredStoreList.length === 0" class="empty-data">
          <el-empty description="暂无数据" />
        </div>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleStoreDialogClose">取消</el-button>
          <el-button type="primary" @click="confirmStoreSelection">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 选择活动对话框 -->
    <el-dialog
        v-model="activityDialogVisible"
        title="选择活动"
        width="1200px"
        :before-close="handleActivityDialogClose"
    >
      <div class="dialog-content">
        <el-table
            :data="activityList"
            style="width: 100%"
            @selection-change="handleActivitySelectionChange"
            max-height="400"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="id" label="编号" width="80" />
          <el-table-column prop="name" label="活动名称" width="150" />
          <el-table-column prop="goal" label="活动目标" width="120" />
          <el-table-column prop="type" label="活动类型" width="100" />
          <el-table-column prop="channel" label="投放渠道" width="100" />
          <el-table-column prop="method" label="营销方式" width="100" />
          <el-table-column prop="time" label="活动时间" width="150" />
          <el-table-column label="操作" width="80">
            <template #default="scope">
              <el-button link type="primary" size="small">操作</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination-wrapper" style="margin-top: 20px;">
          <el-pagination
              v-model:current-page="activityPagination.currentPage"
              v-model:page-size="activityPagination.pageSize"
              :page-sizes="[10, 20, 50]"
              :total="activityPagination.total"
              layout="prev, pager, next"
              @size-change="handleActivitySizeChange"
              @current-change="handleActivityCurrentChange"
          />
        </div>
      </div>

      <template #footer>
          <span class="dialog-footer">
            <el-button @click="handleActivityDialogClose">取消</el-button>
            <el-button type="primary" @click="confirmActivitySelection">确定</el-button>
          </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {ref, reactive, onMounted, nextTick, computed} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import {Plus, View, Delete} from '@element-plus/icons-vue'

// 当前视图状态
const currentView = ref('list')

// 图片预览相关
const previewDialogVisible = ref(false)
const previewImageUrl = ref('')

// 店铺选择相关
const storeDialogVisible = ref(false)
const storeSearchKeyword = ref('')
const storeAreaFilter = ref('')
const selectedStore = ref('')
const selectedStoreData = ref(null)

// 活动选择相关
const activityDialogVisible = ref(false)
const selectedActivity = ref('')
const selectedActivityData = ref(null)

// 搜索表单数据
const searchForm = reactive({
  title: '',
  category: '全部',
  dateRange: []
})

// 表格数据 - 删除示例数据
const tableData = ref([])

// 分页数据
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

// 活动分页数据
const activityPagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

// 选中的行
const selectedRows = ref([])

// 创建表单数据
const createForm = reactive({
  title: '',
  category: '',
  tags: '',
  summary: '',
  content: '',
  store: '',
  slogan: '',
  storeLink: '',
  activitySlogan: '',
  activityLink: '',
  location: '39.90923,116.397428',
  coverImage: '', // 存储封面图片的base64数据
  mainImage: ''   // 存储主图的base64数据
})

// 文件上传相关
const coverFileList = ref([])
const mainImageFileList = ref([])

// 店铺列表数据
const storeList = ref([
  {id: '001', name: '北京朝阳店', area: '朝阳区'},
  {id: '002', name: '北京海淀店', area: '海淀区'},
  {id: '003', name: '北京西城店', area: '西城区'},
  {id: '004', name: '北京东城店', area: '东城区'},
  {id: '005', name: '上海浦东店', area: '浦东区'},
])

// 活动列表数据（按要求不包含编号34、35的数据）
const activityList = ref([
  {
    id: '001',
    name: '春季促销活动',
    goal: '提升销量',
    type: '促销',
    channel: '线上',
    method: '优惠券',
    time: '2024-03-01 至 2024-03-31'
  },
  {
    id: '002',
    name: '会员专享活动',
    goal: '会员增长',
    type: '会员',
    channel: '线下',
    method: '积分',
    time: '2024-04-01 至 2024-04-30'
  },
  {
    id: '003',
    name: '新品发布会',
    goal: '品牌推广',
    type: '发布',
    channel: '全渠道',
    method: '体验',
    time: '2024-05-15 至 2024-05-15'
  }
])

// 高德地图实例
let map = null

// 过滤后的店铺列表
const filteredStoreList = computed(() => {
  let filtered = storeList.value

  if (storeSearchKeyword.value) {
    filtered = filtered.filter(store =>
        store.name.includes(storeSearchKeyword.value)
    )
  }

  if (storeAreaFilter.value) {
    filtered = filtered.filter(store =>
        store.area === storeAreaFilter.value
    )
  }

  return filtered
})

// 将文件转换为base64
const fileToBase64 = (file) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = error => reject(error)
  })
}

// 处理选择变化
const handleSelectionChange = (selection) => {
  selectedRows.value = selection
}

// 搜索
const handleSearch = () => {
  console.log('搜索参数:', searchForm)
  ElMessage.success('查询成功')
}

// 重置
const handleReset = () => {
  searchForm.title = ''
  searchForm.category = '全部'
  searchForm.dateRange = []
  ElMessage.info('已重置搜索条件')
}

// 创建推文
const handleCreate = () => {
  currentView.value = 'create'
  nextTick(() => {
    initMap()
  })
}

// 返回列表
const backToList = () => {
  currentView.value = 'list'
  // 清空表单数据
  Object.keys(createForm).forEach(key => {
    if (typeof createForm[key] === 'string') {
      createForm[key] = key === 'location' ? '39.90923,116.397428' : ''
    }
  })
  coverFileList.value = []
  mainImageFileList.value = []
  selectedStore.value = ''
  selectedActivity.value = ''
}

// 上线
const handleOnline = (row) => {
  ElMessage.success(`文章 "${row.title}" 已上线`)
}

// 编辑
const handleEdit = (row) => {
  ElMessage.info(`编辑文章: ${row.title}`)
}

// 删除
const handleDelete = (row) => {
  ElMessageBox.confirm(
      `确定要删除文章 "${row.title}" 吗？`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
  ).then(() => {
    ElMessage.success('删除成功')
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}

// 分页大小变化
const handleSizeChange = (val) => {
  pagination.pageSize = val
}

// 当前页变化
const handleCurrentChange = (val) => {
  pagination.currentPage = val
}

// 活动分页大小变化
const handleActivitySizeChange = (val) => {
  activityPagination.pageSize = val
}

// 活动当前页变化
const handleActivityCurrentChange = (val) => {
  activityPagination.currentPage = val
}

// 文件上传前验证
const beforeUpload = (file) => {
  const isImage = file.type.startsWith('image/')
  const isLt5M = file.size / 1024 / 1024 < 5

  if (!isImage) {
    ElMessage.error('只能上传图片文件!')
    return false
  }
  if (!isLt5M) {
    ElMessage.error('图片大小不能超过 5MB!')
    return false
  }
  return false // 阻止自动上传，我们手动处理
}

// 封面图片变化处理
const handleCoverChange = async (file, fileList) => {
  if (file.status === 'ready') {
    try {
      const base64 = await fileToBase64(file.raw)
      createForm.coverImage = base64

      // 更新文件列表，添加预览URL
      const updatedFile = {
        ...file,
        url: base64,
        status: 'success'
      }

      coverFileList.value = [updatedFile]
      ElMessage.success('封面图片上传成功')
    } catch (error) {
      ElMessage.error('图片处理失败')
      console.error('Error converting file to base64:', error)
    }
  }
}

// 封面删除
const handleCoverRemove = (file) => {
  createForm.coverImage = ''
  coverFileList.value = []
  ElMessage.info('封面已删除')
}

// 封面预览
const handleCoverPreview = (file) => {
  previewImageUrl.value = file.url || createForm.coverImage
  previewDialogVisible.value = true
}

// 主图变化处理
const handleMainImageChange = async (file, fileList) => {
  if (file.status === 'ready') {
    try {
      const base64 = await fileToBase64(file.raw)
      createForm.mainImage = base64

      // 更新文件列表，添加预览URL
      const updatedFile = {
        ...file,
        url: base64,
        status: 'success'
      }

      mainImageFileList.value = [updatedFile]
      ElMessage.success('主图上传成功')
    } catch (error) {
      ElMessage.error('图片处理失败')
      console.error('Error converting file to base64:', error)
    }
  }
}

// 主图删除
const handleMainImageRemove = (file) => {
  createForm.mainImage = ''
  mainImageFileList.value = []
  ElMessage.info('主图已删除')
}

// 主图预览
const handleMainImagePreview = (file) => {
  previewImageUrl.value = file.url || createForm.mainImage
  previewDialogVisible.value = true
}

// 关闭预览对话框
const handlePreviewClose = () => {
  previewDialogVisible.value = false
  previewImageUrl.value = ''
}

// 打开店铺选择对话框
const openStoreDialog = () => {
  storeDialogVisible.value = true
}

// 关闭店铺选择对话框
const handleStoreDialogClose = () => {
  storeDialogVisible.value = false
  storeSearchKeyword.value = ''
  storeAreaFilter.value = ''
}

// 搜索店铺
const searchStores = () => {
  // 搜索逻辑已通过computed实现
  ElMessage.success('搜索完成')
}

// 店铺选择变化
const handleStoreSelectionChange = (selection) => {
  selectedStoreData.value = selection.length > 0 ? selection[0] : null
}

// 确认店铺选择
const confirmStoreSelection = () => {
  if (selectedStoreData.value) {
    selectedStore.value = selectedStoreData.value.name
    createForm.storeLink = selectedStoreData.value.id
    ElMessage.success(`已选择店铺: ${selectedStoreData.value.name}`)
  } else {
    ElMessage.warning('请选择一个店铺')
    return
  }
  handleStoreDialogClose()
}

// 打开活动选择对话框
const openActivityDialog = () => {
  activityDialogVisible.value = true
  activityPagination.total = activityList.value.length
}

// 关闭活动选择对话框
const handleActivityDialogClose = () => {
  activityDialogVisible.value = false
}

// 活动选择变化
const handleActivitySelectionChange = (selection) => {
  selectedActivityData.value = selection.length > 0 ? selection[0] : null
}

// 确认活动选择
const confirmActivitySelection = () => {
  if (selectedActivityData.value) {
    selectedActivity.value = selectedActivityData.value.name
    createForm.activityLink = selectedActivityData.value.id
    ElMessage.success(`已选择活动: ${selectedActivityData.value.name}`)
  } else {
    ElMessage.warning('请选   一个活动')
    return
  }
  handleActivityDialogClose()
}

// 提交表单
const handleSubmit = () => {
  // 验证必填字段
  if (!createForm.title) {
    ElMessage.error('请输入文章标题')
    return
  }
  if (!createForm.category) {
    ElMessage.error('请选择文章分类')
    return
  }
  if (!createForm.tags) {
    ElMessage.error('请选择文章标签')
    return
  }
  if (!createForm.summary) {
    ElMessage.error('请输入文章摘要')
    return
  }
  if (!createForm.coverImage) {
    ElMessage.error('请上传文章封面')
    return
  }
  if (!createForm.mainImage) {
    ElMessage.error('请上传主图图片')
    return
  }
  if (!createForm.content) {
    ElMessage.error('请输入文章详情')
    return
  }

  console.log('提交的表单数据:', createForm)
  ElMessage.success('文章提交成功')
  currentView.value = 'list'
}

// 保存草稿
const handleSaveDraft = () => {
  console.log('保存的草稿数据:', createForm)
  ElMessage.success('草稿保存成功')
}

// 初始化高德地图
const initMap = () => {
  // 动态加载高德地图API
  if (!window.AMap) {
    const script = document.createElement('script')
    script.src = 'https://webapi.amap.com/maps?v=2.0&key=063c14a09569c7f7953a40597b51ee21'
    script.onload = () => {
      createMap()
    }
    document.head.appendChild(script)
  } else {
    createMap()
  }
}

// 创建地图
const createMap = () => {
  if (typeof AMap !== 'undefined') {
    map = new AMap.Map('amap-container', {
      zoom: 11,
      center: [116.397428, 39.90923],
      mapStyle: 'amap://styles/normal'
    })

    // 添加标记
    const marker = new AMap.Marker({
      position: [116.397428, 39.90923],
      title: '北京'
    })
    map.add(marker)

    // 地图点击事件
    map.on('click', (e) => {
      const {lng, lat} = e.lnglat
      createForm.location = `${lat.toFixed(6)},${lng.toFixed(6)}`
      marker.setPosition([lng, lat])
    })
  } else {
    console.error('AMap is not defined. Please check if the script is loaded correctly.')
  }
}

onMounted(() => {
  console.log('信息管理页面已加载')
})
</script>

<style scoped>
.info-management {
  background-color: #f5f5f5;
}

.header {
  background: white;
  border-bottom: 1px solid #e4e7ed;
  padding: 0 24px;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.title {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.main-content {
  padding: 24px;
}

.search-card {
  margin-bottom: 24px;
}

.search-form {
  margin: 0;
}

.search-form .el-form-item {
  margin-bottom: 0;
}

.table-card, .create-card {
  background: white;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-title {
  font-size: 18px;
  font-weight: 500;
  color: #303133;
}

.id-text {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 12px;
  color: #409eff;
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.create-form {
  max-width: 800px;
}

.upload-container {
  width: 100%;
}

.upload-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

.upload-icon {
  font-size: 28px;
  color: #8c939d;
  margin-bottom: 8px;
}

.upload-text {
  color: #8c939d;
  font-size: 14px;
}

.amap-container {
  width: 100%;
  height: 300px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

/* 对话框内容样式 */
.dialog-content {
  padding: 0;
}

.search-section {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.filter-section {
  margin: 15px 0;
}

.empty-data {
  text-align: center;
  padding: 40px 0;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* 图片预览样式 */
.preview-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

.preview-image {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .search-form {
    display: block;
  }

  .search-form .el-form-item {
    display: block;
    margin-bottom: 16px;
  }

  .header-content {
    flex-direction: column;
    height: auto;
    padding: 16px 0;
    gap: 16px;
  }

  .main-content {
    padding: 16px;
  }

  .preview-container {
    min-height: 300px;
  }

  .preview-image {
    max-height: 50vh;
  }
}

/* Element Plus 样式覆盖 */
:deep(.el-table .el-table__cell) {
  padding: 12px 0;
}

:deep(.el-card__header) {
  padding: 18px 20px 10px;
  border-bottom: 1px solid #ebeef5;
}

:deep(.el-card__body) {
  padding: 20px;
}

:deep(.el-button--text) {
  padding: 0;
  margin-right: 8px;
}

:deep(.el-tag--small) {
  height: 24px;
  line-height: 22px;
  padding: 0 8px;
}

/* 上传组件样式 */
:deep(.el-upload--picture-card) {
  width: 148px;
  height: 148px;
  display: flex;
  align-items: center;
  justify-content: center;
}

:deep(.el-upload-list--picture-card .el-upload-list__item) {
  width: 148px;
  height: 148px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

:deep(.el-upload-list--picture-card .el-upload-list__item img) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

:deep(.el-upload-list--picture-card .el-upload-list__item-actions) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  opacity: 0;
  transition: opacity 0.3s;
}

:deep(.el-upload-list--picture-card .el-upload-list__item:hover .el-upload-list__item-actions) {
  opacity: 1;
}

:deep(.el-upload-list--picture-card .el-upload-list__item-actions .el-icon) {
  color: white;
  font-size: 20px;
  cursor: pointer;
  transition: transform 0.2s;
}

:deep(.el-upload-list--picture-card .el-upload-list__item-actions .el-icon:hover) {
  transform: scale(1.2);
}

/* 文本域可拉伸样式 */
:deep(.el-textarea__inner) {
  resize: vertical;
  min-height: 80px;
}

/* 对话框样式优化 */
:deep(.el-dialog) {
  border-radius: 8px;
}

:deep(.el-dialog__header) {
  padding: 20px 20px 10px;
  border-bottom: 1px solid #ebeef5;
}

:deep(.el-dialog__body) {
  padding: 20px;
}
</style>